<template>
  <div class="mobile-dashboard">
    <!-- 开发模式提示 -->
    <div v-if="isDev && !isMobileDevice" class="dev-tip">
      <van-notice-bar
        text="开发模式：PC端访问移动端页面，建议使用浏览器开发者工具模拟移动设备"
        color="#1989fa"
        background="#ecf9ff"
      />
    </div>
    
    <van-nav-bar title="问卷系统" />
    
    <div class="dashboard-content">
      <van-cell-group inset>
        <van-cell title="欢迎回来" :value="userInfo.nickName || userInfo.name" />
        <van-cell title="用户角色" :value="userInfo.roles?.join(', ') || '普通用户'" />
      </van-cell-group>
      
      <van-grid :column-num="2" :gutter="16" class="feature-grid">
        <van-grid-item 
          icon="chart-trending-o" 
          text="问卷广场" 
          @click="goToQuestionnaireSquare"
        />
        <van-grid-item 
          icon="setting-o" 
          text="信息处理中心" 
          @click="goToInfoCenter"
        />
      </van-grid>
      
      <van-button 
        type="danger" 
        block 
        @click="handleLogout"
        class="logout-btn"
      >
        退出登录
      </van-button>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showConfirmDialog, showSuccessToast, showToast } from 'vant'
import useUserStore from '@/store/modules/user'

// 开发环境和设备检测
const isDev = import.meta.env.DEV
const isMobileDevice = /Android|webOS|iPhone|iPod|BlackBerry|iPad|Windows Phone|Mobile/i.test(navigator.userAgent)

const router = useRouter()
const userStore = useUserStore()

// 计算用户信息
const userInfo = computed(() => ({
  name: userStore.name,
  nickName: userStore.nickName,
  roles: userStore.roles
}))

// 页面挂载时，若未登录（无token），强制跳转到/mobile-login，防止越权。
onMounted(() => {
  if (!userStore.token) {
    router.replace('/mobile-login')
    return
  }
})

// 跳转到问卷广场
function goToQuestionnaireSquare() {
  router.push('/mobile-questionnaire-square')
}

// 跳转到信息处理中心
function goToInfoCenter() {
  router.push('/mobile-info-center')
}

// 退出登录
async function handleLogout() {
  try {
    await showConfirmDialog({
      title: '确认退出',
      message: '确定要退出登录吗？退出后需要重新登录。'
    })
    
    // 显示加载状态
    showToast({
      message: '正在退出...',
      duration: 0,
      forbidClick: true
    })
    
    // 调用store的退出登录方法
    await userStore.logOut()
    
    // 清除本地存储的记住密码信息
    const Cookies = await import('js-cookie')
    Cookies.default.remove('username')
    Cookies.default.remove('password')
    Cookies.default.remove('rememberMe')
    
    // 清除其他可能的本地存储
    localStorage.removeItem('vuex')
    sessionStorage.clear()
    
    showSuccessToast('退出成功')
    
    // 跳转到移动端登录页面
    setTimeout(() => {
      router.push('/mobile-login')
    }, 1000)
  } catch (error) {
    if (error) {
      console.error('退出登录失败:', error)
      showToast('退出失败，请重试')
    }
    // 用户取消退出时不显示错误
  }
}
</script>

<style scoped>
.mobile-dashboard {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.dashboard-content {
  padding: 20px;
  padding-top: 20px;
}

.feature-grid {
  margin: 24px 0;
}

.logout-btn {
  margin-top: 40px;
  border-radius: 24px;
  height: 48px;
  font-size: 16px;
  font-weight: 600;
}

.dev-tip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* 自定义 Vant 组件样式 */
:deep(.van-nav-bar) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

:deep(.van-nav-bar__title) {
  color: white;
  font-weight: 600;
  font-size: 18px;
}

:deep(.van-cell-group--inset) {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

:deep(.van-cell) {
  padding: 16px 20px;
  font-size: 16px;
}

:deep(.van-cell__title) {
  font-weight: 500;
  color: #333;
}

:deep(.van-cell__value) {
  color: #666;
}

:deep(.van-grid-item__content) {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: all 0.3s ease;
}

:deep(.van-grid-item__content:active) {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

:deep(.van-grid-item__icon) {
  font-size: 32px;
  color: #667eea;
  margin-bottom: 8px;
}

:deep(.van-grid-item__text) {
  color: #333;
  font-weight: 500;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 375px) {
  .dashboard-content {
    padding: 16px;
  }
  
  :deep(.van-cell) {
    padding: 14px 16px;
    font-size: 15px;
  }
  
  :deep(.van-grid-item__content) {
    padding: 16px;
  }
}
</style> 